<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>
		图片素材
	</title>
	<script src="{{__PUBLIC__}}/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="{{__PUBLIC__}}/hdjs/hdjs.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="{{__PUBLIC__}}/uploadify/jquery.uploadify.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="{{__PUBLIC__}}/uploadify/uploadify.css"/>
	<link rel="stylesheet" type="text/css" href="{{__PUBLIC__}}/hdjs/hdjs.css"/>
</head>
<body>
	<h1>图片素材</h1>
	<div>

		<input type="file" name="file_upload" id="file_upload" />
		<script type="text/javascript">
			$(function() {
				$('#file_upload').uploadify({
					'swf'      : '{{__PUBLIC__}}/uploadify/uploadify.swf',
					'uploader' : '{{U("upload")}}',
					'fileTypeDesc' : 'Image Files',
					'fileTypeExts' : '*.gif; *.jpg; *.png',
					'onUploadSuccess' : function(file, data, response) {
						data = jQuery.parseJSON(data);
						var html="<li>\
						<img src='"+data.path+"'/>\
						<br />\
						<input type='hidden' name='media_id' value='"+data.media_id+"'/>\
						<input type='text' name='keyword' value=''/>\
					</li>";
					$("ul").prepend(html);
				}
			});
			});
		</script>
	</div>
	<ul>
		{{foreach from="$data" key="$k" value="$v"}}
		<li>
			<img src="{{$v['path']}}" alt="" />
			<br />
			<input type="hidden" name="media_id" value="{{$v['media_id']}}" />
			<input type="text" name="keyword" value="{{$v['keyword']}}" />
			<button id="del" onclick="del()">
				X
			</button>
		</li>
		{{endforeach}}
	</ul>
	<style type="text/css">
	
		ul li{
			width: 250px;
			float: left;
			margin: 15px;
			border: solid 1px #dcdcdc;
			position:relative;
		}
		ul li img{
			width:250px;
			height: 140px;
		}
		#del{
			width: 20px;
			height: 20px;
			position:absolute;
			top:10px;
			right: 10px;
			background: blue;
			text-align: center;
			line-height: 20px;
			cursor: pointer;
		}
	</style>
 	<script type="text/javascript">
		$(function(){

			$("ul").delegate('li',"change",function(){
				
				var media_id= $(this).find('[name=media_id]').val();
				var postData={
					'media_id':media_id,
					'keyword':$(this).find('[name=keyword]').val()
				};
				$.post("{{U('changeImageKeyword')}}",postData,function(data){
						hd_alert({
							message: data.message,
							timeout: 3,
						});

				},'json');
			});
		})
		
	</script>
	<script type="text/javascript">
	
	function del(id)
    {
        if(confirm('确定删除吗？'))
        {
            $("li").delegate('#del',"click",function(){
				var media_id= $(this).parent().find('[name=media_id]').val();
				
				var postData={
					'media_id':media_id
				};
				$.post("{{U('del')}}",postData,function(data){
						hd_alert({
							message: data.message,
							timeout: 3,
						});
				window.location.reload(true);
				},'json');
			});
        }
    }
		
	</script>

</body>
</html>








